import React, { useState, useEffect } from 'react';
import '../MemberList/MemberList.css'
import axios from '../../../utils/myAixos.js'
import { Input, Button, DatePicker, Table, Space, message, Popconfirm, Form } from 'antd';
import { useNavigate } from 'react-router-dom'




const Memberlist = () => {

    const [dataList, setDataList] = useState([]); //表格数据
    //获取会员数据
    const getStu = () => {
        axios({
            url: '/getMemberData',
            method: 'post'
        }).then(res => {
            console.log('获取所有会员数据1', res.data.data)
            console.log(res.status)
            if (res.status === 200) {
                setDataList(res.data.data)
            }
        }).catch(err => {
            console.log('获取所有会员数据2', err)
        })
    }
    //1、获取到所有会员的数据
    useEffect(() => {
        getStu()
    }, [])





    //确定删除
    const confirmDel = (row) => {
        console.log('确定删除按钮', row)
        //发请求
        axios({
            url: '/memberDel',
            method: 'post',
            data: {
                m_id: row.m_id
            }
        }).then(res => {
            console.log('删除学生数据', res)
            if (res.code === 200) {
                message.success("删除成功")
                getStu()
            } else {
                message.error("删除成功")
                getStu()
            }
        }).catch(err => {
            console.log('删除学生数据', err)
        })
    }
    const cancelDel = () => {

    }
    //点击查询
    const search = (params) => {
        console.log("search1111");
        console.log('7777', params)
        axios({
            url: '/memberSearch',
            method: 'post',
            data: params
        }).then(res => {
            console.log('查询会员结222果', res.data.status)
            if (res.data.status === 200) {
                //获取成功
                // res.data
                setDataList(res.data.data)
                message.success('查询成功')

            }
        }).catch(err => {
            console.log('查询会员的结果', err)
        })
    }
    //跳转
    const navigate = useNavigate()
    // 编辑
    const Edit = (row) => {
        console.log('确定编辑按钮', row.m_id)
        navigate('/HomePage/AddUser', {
            state: {
                id: row.m_id,
                m_name: row.m_name,
                m_phone: row.m_phone
            }
        })
    }
    // onClick={() => navigate('/HomePage/User')}
    //查看
    const Chakan = (row) => {
        console.log('确定编辑按钮', row.m_id)
        navigate('/HomePage/User', {
            state: {
                id: row.m_id,
                m_name: row.m_name,
                m_phone: row.m_phone,
                m_carname: row.m_carname,
                m_dengji: row.m_dengji,
                m_teacher: row.m_teacher,
                m_status: row.m_status,
                m_src: row.m_src,
                m_sex: row.m_sex,

            }
        })
        // navigate('/HomePage/ChakanCoach')}
    }
    //表格
    const columns = [
        {
            title: '姓名',
            dataIndex: 'm_name',
            key: '1',
            align: 'center',
        },
        {
            title: '电话',
            dataIndex: 'm_phone',
            key: '2',
            align: 'center',
        },
        {
            title: '会员卡',
            dataIndex: 'm_carname',
            key: '3',
            align: 'center',
        },
        {
            title: '会员等级',
            dataIndex: 'm_dengji',
            key: '4',
            align: 'center',
        },
        {
            title: '教练',
            dataIndex: 'm_teacher',
            key: '5',
            align: 'center',
        },
        {
            title: '账户启用状态',
            key: '6',
            dataIndex: 'm_status',
            align: 'center',
        },
        {
            title: '操作',
            key: '7',
            dataIndex: 'm_caozuo',
            align: 'center',
            render: (_, record) => (
                <Space size="middle">
                    <a type="primary" onClick={() => Chakan(record)}  >查看</a>
                    <a type="primary" onClick={() => Edit(record)}>编辑</a>
                    {/* onClick={() => navigate('/HomePage/AddUser')} */}
                    <Popconfirm
                        title="Delete the task"
                        description="确定删除吗？"
                        onConfirm={() => confirmDel(record)}
                        onCancel={cancelDel}
                        okText="Yes"
                        cancelText="No"
                    >
                        <a type="primary" htmlType="submit" onFinish={confirmDel}>删除</a>
                        {/* <Button type={"dashed"}>删除</Button> */}
                    </Popconfirm>

                </Space>
            ),

        },
    ];
    //表格
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const [loading, setLoading] = useState(false);
    const start = () => {
        setLoading(true);
        // ajax request after empty completing
        setTimeout(() => {
            setSelectedRowKeys([]);
            setLoading(false);
        }, 1000);
    };
    const onSelectChange = (newSelectedRowKeys) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;
    return (
        <div class="boxMemberlist">
            {/* 按钮栏 */}
            <div class="titleMemberlist">
                <Form
                    name="horizontal_login"
                    layout="inline"
                    onFinish={search}
                >
                    <Form.Item
                        name="m_name"
                    >
                        <Input placeholder="姓名" />
                    </Form.Item>
                    <Form.Item
                        name="m_phone"
                    >
                        <Input placeholder="电话" />
                    </Form.Item>

                    <Form.Item shouldUpdate>
                        {() => (
                            <Button
                                type="primary"
                                htmlType="submit"
                            >
                                查询
                            </Button>
                        )}
                    </Form.Item>
          
                </Form>
            </div>

            {/* <Form
                name="horizontal_login"
                layout="inline"
                onFinish={search}
            >
                <Form.Item
                    name="m_name"
                >
                    <Input placeholder="姓名" />
                </Form.Item>
                <Form.Item
                    name="m_phone"
                >
                    <Input placeholder="电话" />
                </Form.Item>

                <Form.Item shouldUpdate>
                    {() => (
                        <Button
                            type="primary"
                            htmlType="submit"
                        >
                            查询
                        </Button>
                    )}
                </Form.Item>
                <Form.Item

                >
                    <Button>导出</Button>
                </Form.Item>
            </Form> */}
            {/* 表单 */}

            <div class="bodyMemberlist">


                <Table rowKey={record => record.m_id} rowSelection={rowSelection} columns={columns} dataSource={dataList} />

            </div>


            {/* 分页 https://juejin.cn/post/6993129506156314660*/}
        </div>
    )
}
export default Memberlist